import styled from 'styled-components'
import { QRCode } from 'antd';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import Telegram from '../../utils/telegram';
import IconBg from '../../asserts/icon_bg.webp'

const Container = styled.div`
    width: 100%;
    height: 100%;
    background: url(${IconBg}) no-repeat no-repeat center;
    background-size: cover;
    padding: .75rem 1.5rem 1.5rem;
    box-sizing: border-box;
`

const Content = styled.div`
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
`

const Title = styled.div`
    font-size: 2.25rem;
    font-weight: bold;
    font-style: normal;
    line-height: normal;
`

const QRCodeBOx = styled(QRCode)`
    width: 250px !important;
    height: 250px !important;
    padding: 20px;
    /* background: linear-gradient(135deg, rgba(51,72,245,0.1) 0%, rgba(255,255,255,0.1) 100%); */
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    background-color: #fff !important;
`

const Unsupport: React.FC = () => {
    const url = useMemo(() => Telegram.bot(), [])
    const { t } = useTranslation();
    return <Container>
        <Content>
            <Title>{t('common.unsupport')}</Title>
            <QRCodeBOx value={url} />
        </Content>
    </Container>
}

export default Unsupport

